<template>
  <div class="main">
    <el-card>
      <div class="info-box">
        <img class="avatar" :src="userObject.headImg" alt="">
        <div class="right-info">
          <el-row>
            <el-col :span="6">
              <span>用户ID:</span>{{userObject.id||'--'}}
            </el-col>
            <el-col :span="6">
              <span>性别:</span>{{userObject.sex||'--'}}
            </el-col>
            <el-col :span="6">
              <span>手机号:</span>{{userObject.phone||'--'}}
            </el-col>
            <el-col :span="6">
              <span>平台身份:</span>{{userObject.relateUser||'--'}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <span>用户昵称:</span>{{userObject.nickName||'--'}}
            </el-col>
            <el-col :span="6">
              <span>生日:</span>{{userObject.birthday||'--'}}
            </el-col>
            <el-col :span="6">
              <span>注册时间:</span>{{userObject.regTime||'--'}}
            </el-col>
            <el-col :span="6">
             <span> 上级推广员:</span>{{userObject.userIdentityValue||'--'}}
            </el-col>
          </el-row>
        </div> 
      </div>
    </el-card>
    <el-card style="min-height:800px;margin-top:10px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="消费记录" name="1">
          <!-- {{recordsList}} -->
          <el-table
          :data="recordsList"
          v-loading="loading"
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#000000',
          }"
          style="width: 100%"
        >
            <el-table-column prop="orderCode" label="订单编号"> </el-table-column>
            <el-table-column prop="receiver" label="收货人"> </el-table-column>
            <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
            <el-table-column prop="goodsType" label="商品类型"> </el-table-column>
            <el-table-column prop="quantity" label="数量"> </el-table-column>
            <el-table-column prop="payMoney" label="实付金额"> </el-table-column>
            <el-table-column prop="tradeCompletedTime" label="交易完成时间"> </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getRecordsData" />
        </el-tab-pane>
        <el-tab-pane label="下级推广员" name="2">
         
          <el-table
          :data="lowerLevelList"
          v-loading="loading"
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#000000',
          }"
          style="width: 100%"
        >
            <el-table-column prop="nickName" label="用户昵称"> </el-table-column>
            <el-table-column prop="phone" label="手机号"> </el-table-column>
            <el-table-column prop="userIdentityValue" label="用户身份"> </el-table-column>
            <el-table-column prop="projectNumber" label="推广项目数"> </el-table-column>
            <el-table-column prop="goodsNumber" label="推广商品数"> </el-table-column>
            <el-table-column prop="projectMoney" label="推广项目金额"> </el-table-column>
            <el-table-column prop="goodsMoney" label="推广商品金额"> </el-table-column>
            <el-table-column prop="bindTime" label="绑定时间"> </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getLowerLevel" />
        </el-tab-pane>
        <el-tab-pane label="余额流水" name="3">
          <p class="tips">
            <span>可提现余额：<i>{{withdrawMoney}}</i> </span>
            <span>冻结中余额：<i>{{freezeMoney}}</i> </span>
          </p>
          <el-table
          :data="balanceFlowList"
          v-loading="loading"
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#000000',
          }"
          style="width: 100%"
        >
            <el-table-column prop="orderCode" label="订单编号"> </el-table-column>
            <el-table-column prop="fundType" label="交易类型"> </el-table-column>
            <el-table-column prop="changeAmount" label="变动金额"> </el-table-column>
            <el-table-column prop="currentMoney" label="当前余额"> </el-table-column>
            <el-table-column prop="changeDate" label="变动时间"> </el-table-column>

          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getBalanceFlow" />
        </el-tab-pane>
        <el-tab-pane label="直推佣金" name="4">
          <el-table
          :data="directCommissionList"
          v-loading="loading"
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#000000',
          }"
          style="width: 100%"
        >
            <el-table-column prop="orderCode" label="订单编号"> </el-table-column>
            <el-table-column prop="relateUser" label="下单用户信息"> </el-table-column>
            <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
            <el-table-column prop="goodsType" label="商品类型"> </el-table-column>
            <el-table-column prop="quantity" label="数量"> </el-table-column>
            <el-table-column prop="totalMoney" label="商品总价"> </el-table-column>
            <el-table-column prop="commission" label="佣金"> </el-table-column>
            <el-table-column prop="status" label="佣金状态"> </el-table-column>
            <el-table-column prop="payTime" label="支付时间"> </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getDirectCommission" />
        </el-tab-pane>
        <el-tab-pane label="间推佣金" name="5">
          <el-table
          :data="indirectCommissionList"
          v-loading="loading"
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#000000',
          }"
          style="width: 100%"
        >
            <el-table-column prop="orderCode" label="订单编号"> </el-table-column>
            <el-table-column prop="promoters" label="推广人"> </el-table-column>
            <el-table-column prop="relateUser" label="下单用户信息"> </el-table-column>
            <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
            <el-table-column prop="goodsType" label="商品类型"> </el-table-column>
            <el-table-column prop="quantity" label="数量"> </el-table-column>
            <el-table-column prop="totalMoney" label="商品总价"> </el-table-column>
            <el-table-column prop="commission" label="佣金"> </el-table-column>
            <el-table-column prop="status" label="佣金状态"> </el-table-column>
            <el-table-column prop="payTime" label="支付时间"> </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getIndirectCommission" />
        </el-tab-pane>
        <el-tab-pane label="讲师活动佣金" name="6">
          <el-table
          :data="activityCommissionList"
          v-loading="loading"
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#000000',
          }"
          style="width: 100%"
        >
            <el-table-column prop="orderCode" label="订单编号"> </el-table-column>
            <el-table-column prop="relateUser" label="下单用户信息"> </el-table-column>
            <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
            <el-table-column prop="goodsType" label="商品类型"> </el-table-column>
            <el-table-column prop="quantity" label="数量"> </el-table-column>
            <el-table-column prop="totalMoney" label="商品总价"> </el-table-column>
            <el-table-column prop="commission" label="佣金"> </el-table-column>
            <el-table-column prop="status" label="佣金状态"> </el-table-column>
            <el-table-column prop="payTime" label="支付时间"> </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getActivityCommission" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {userDetail,queryConsumptionRecords,queryLowerLevelPromoters,queryBalanceFlow,queryDirectCommission,queryIndirectCommission,queryActivityCommission} from '@/api/user'
import Pagination from '@/components/Pagination'
export default {
  name: '',
  components: {Pagination},
  props: {},
  data() {
    return {
      loading:true,
      userId:null,
      withdrawMoney:null,
      freezeMoney:null,
      userObject:{},
      recordsList:[],
      lowerLevelList:[],
      balanceFlowList:[],
      directCommissionList:[],
      indirectCommissionList:[],
      activityCommissionList:[],
      activeName:'1',
      total: 0,
      queryParams:{
        userId:null,
        pageNumber:1,
        pageSize:10
      }
    }
  },
  watch: {},
  computed: {},
  methods: {
    async getDetails(){
        const res = await userDetail(this.userId)
        this.userObject = res.data
    },
    handleClick(tab, event) {
      this.queryParams.pageNumber = 1
      this.queryParams.pageSize = 10

      switch (tab.name) {  
          case '1':  
            this.getRecordsData()
            break;  
          case '2':  
            this.getLowerLevel()
            break;  
          case '3':  
            this.getBalanceFlow()
            break;  
          case '4':  
            this.getDirectCommission()
            break;  
          case '5':  
            this.getIndirectCommission()
            break;  
          case '6':  
            this.getActivityCommission()
            break;  
         
          default:  
        
            break;  
        }
        console.log(tab.name, event);
    },
    // 消费记录
    async getRecordsData(){
      const res = await queryConsumptionRecords(this.queryParams)
      this.loading =false
      this.recordsList = res.data.list
      this.total = res.data.total
    },
    // 下级推广员
    async getLowerLevel(){
      const res = await queryLowerLevelPromoters(this.queryParams)
      this.loading = false
      this.lowerLevelList = res.data.list
      this.total = res.data.total
    },
    // 余额流水
    async getBalanceFlow(){
      const res = await queryBalanceFlow(this.queryParams)
      this.loading = false
      this.balanceFlowList = res.data.list
      this.total = res.data.total
      this.withdrawMoney = res.data.withdrawMoney
      this.freezeMoney = res.data.freezeMoney
    },
    // 直推佣金
    async getDirectCommission(){
      const res = await queryDirectCommission(this.queryParams)
      this.loading = false
      this.directCommissionList = res.data.list
      this.total = res.data.total
    },
    // 间推佣金
    async getIndirectCommission(){
      const res = await queryIndirectCommission(this.queryParams)
      this.loading = false
      this.indirectCommissionList = res.data.list
      this.total = res.data.total
    },
    async getActivityCommission(){
      const res = await queryActivityCommission(this.queryParams)
      this.loading = false
      this.activityCommissionList = res.data.list
      this.total = res.data.total
    },
    goUrl(title){
      
    }
  },
  created() {
    this.userId = Number(this.$route.query.userId)
    this.queryParams.userId =  this.userId
    this.getDetails()
    this.getRecordsData()
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.info-box{
  display: flex;
  align-items: center;
  .avatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
   }
   .right-info{
    width: 100%;
    .el-row{
      margin-bottom: 10px;
      span{
        text-align: justify;
        margin-right: 10px;
      }
    }
   }
}
.tips{
 
  span{
    color: #999;
    margin-right: 16px;
  }
  i{
    font-style: normal;
    color: #000;
  }
}
</style>